<template>
  <BothInputTemplate v-model:leftStr="originStr" v-model:rightStr="encryptRes">
    <template #menu>
      <div class="menu flex-column-center">
        <el-button type="primary" size="small" @click="onEncrypt">
          加 密
          <i class="iconfont icon-jiami1"></i>
        </el-button>

        <el-button type="primary" size="small" @click="onDecode">
          解 密
          <i class="iconfont icon-jiemi"></i>
        </el-button>

        <el-button type="success" size="small" :disabled="!encryptRes" @click="useCopy(encryptRes)">
          复制结果
          <i class="iconfont icon-fuzhi"></i>
        </el-button>
      </div>
    </template>
  </BothInputTemplate>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { encode, decode } from "js-base64";
import useCopy from "@/hook/useCopy";

const originStr = ref("");
const encryptRes = ref("");

const onEncrypt = () => {
  const res = encode(originStr.value);
  if (encryptRes.value !== res) {
    encryptRes.value = res;
  }
};

const onDecode = () => {
  const res = decode(originStr.value);
  if (encryptRes.value !== res) {
    encryptRes.value = res;
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";
.menu {
  :deep(.el-button) {
    width: 70%;
    margin: 6px 0;
    i {
      margin-left: 6px;
    }
  }
}
</style>
